<template>
  <div class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <Music :item="item" 
    v-for="item in playlists" :key="item.id" class="infinite-list-item" />
  </div>
</template>

<script>
import Music from '../../src/components/Music'
import { getMovie } from "../model/index";
export default {
  name: 'Home',
  components: {
    Music
  },
  data(){
    return{
      playlists:[],
    }
  },
  
  methods: {
    getLists(){
      getMovie({offset:this.$data.playlists.length}).then(res=>{
        let result = [...this.$data.playlists,...res.data.playlists]
        this.playlists = result
      })
    },
    load(){
      this.getLists()
    },
  },
  mounted(){
    this.getLists()
  },
}

</script>

<style scoped>
.infinite-list{
    display: grid;
    align-items: top;
    justify-content: center;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 20px;
  }
  .infinite-list-item{
    width:230px;
    font-size: 30px;
    position: relative;
  }
</style>